<template>
	<view class="container">
		<view class="centerItem">
			<uni-section type="line" class="mb-10" title="订单信息"></uni-section>
			<view class="centerItemBody">
				<view class="centerItemBodyList" v-for="item in orderLableData" :key="item.dataIndex">
					<text class="label">{{ item.title || '--' }}：</text>
					<!-- 如果有自定义渲染 -->
					<template v-if="item.formatter">
						<!-- 如果是文本 -->
						<text v-if="item.formatter.type == 'text'" class="value">{{ item.formatter.format(dataList).value }}</text>
						<!-- 如果是图片 -->
						<template v-if="item.formatter.type == 'image'">
							<u-image v-for="im in item.formatter.format(dataList)" :key="im.key" :src="im.src" width="200rpx" height="200rpx">
								<template v-slot:error>
									<view style="font-size: 24rpx">加载失败</view>
								</template>
							</u-image>
						</template>
					</template>
					<text class="value" v-else>{{ dataList[item.dataIndex] || '--' }}</text>
				</view>
				<view class="centerItemBodyList">
					<text class="label">审批结果：</text>
					<text class="value"><u-tag :text="approvalStateLable[dataList.approvalState || '-1'].value" mode="dark" size="mini" /></text>
				</view>
			</view>
		</view>
		<view class="centerItem" v-if="dataList.approvalState == 1">
			<uni-section type="line" class="mb-10" title="审批信息"></uni-section>
			<u-form :model="form" ref="form1">
				<u-form-item label="审批结果" prop="approvalState" label-width="180rpx">
					<u-radio-group v-model="form.approvalState">
						<u-radio v-for="(item, index) in approvalStateOptions" :key="index" :name="item.value">
							{{ item.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="审批意见" prop="approvalOpinion" label-width="180rpx">
					<u-input type="textarea" v-model="form.approvalOpinion"></u-input>
				</u-form-item>
			</u-form>
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { navBack, setLoadingToast, setToast } from '@/common/utils.js';
import { getProcessDetails, setAuditStart } from '../../../../../api/yuShuo';
import { approvalStateOptions } from '../../../../../common/data';
import { approvalStateLable } from '../../../../../common/copyPc';
import { getTableColumn } from '../../../../../common/tableOptions';

const orderLableData = ref<any>([]);

const form = reactive({
	approvalState: '',
	approvalOpinion: ''
});

const submit = () => {
	if (!form.approvalState) {
		return setToast('请选择审批状态');
	}

	if (form.approvalState == '0' && !form.approvalOpinion) {
		return setToast('请填写审批意见');
	}

	setLoadingToast('审批中...');
	// 提交、返回
	const { salesmanId } = dataList.value;
	setAuditStart({
		salesmanId,
		...form
	}).then((res) => {
		uni.hideLoading();
		if (res.code) {
			uni.$emit('audited', salesmanId);
			navBack();
		}
	});
};

// 请求数据
const dataList = ref<any>({});
const getData = (params: any) => {
	getProcessDetails(params).then((res: any) => {
		if (res.code) {
			dataList.value = res.data;
		}
	});
};

onLoad((options) => {
	const D: any = JSON.parse(decodeURIComponent(options.item));
	const { id: requestId, salesmanId, salesmanType } = D.item;
	// 根据类型加载对应的tableOptions配置
	orderLableData.value = getTableColumn[salesmanType]();
	console.log('orderLableData ========> ', orderLableData.value);
	getData({ requestId, salesmanId });
});

onShow(() => {});
</script>

<style lang="scss" scoped>
.mb-10 {
	margin: 10rpx 0;
}

.container {
	padding: 30rpx;
	padding-bottom: 150rpx;

	.centerItem {
		.centerItemBody {
			.centerItemBodyList {
				display: flex;
				font-size: 26rpx;
				padding: 10rpx;
				.label {
					display: block;
					width: 220rpx;
					font-weight: 500;
					// border: 1rpx solid red;
				}
				.value {
					flex: 1;
					// border: 1rpx solid red;
					color: #565656;
				}
			}
		}
	}
}
</style>
